<template>
  <div>
    <!-- 标题 -->
    <ConTitle :info="info"></ConTitle>

    <!-- 概览的组件 -->
    <GaiLan class="lineleft"></GaiLan>
    <!-- 双重循环 -->
    <div class="bigcard">
      <el-card class="box-card-w">
        <h3>济南农业基地</h3>
        <div class="clearfix-w">
          <el-card class="smallcard">
            <!-- <ul class="base">
              <li v-for="(item, key, index) in sensorList" :key="index">
                {{ key }}
                <div v-for="i in item" :key="i.id">{{ i.devName }}</div>
              </li>
            </ul> -->
            <span class="iconfont icon-yalichuanganqi"></span>
            <div><span>50%rh</span></div>
            <div><span>空气温湿度</span></div>
            <div><span>EUI:2JD92738389</span></div>
          </el-card>
          <el-card class="smallcard">
            <span class="iconfont icon-yalichuanganqi"></span>
            <div><span>50%rh</span></div>
            <div><span>空气温湿度</span></div>
            <div><span>EUI:2JD92738389</span></div>
          </el-card>
          <el-card class="smallcard">
            <span class="iconfont icon-yalichuanganqi"></span>
            <div><span>50%rh</span></div>
            <div><span>空气温湿度</span></div>
            <div><span>EUI:2JD92738389</span></div>
          </el-card>
          <el-card class="smallcard">
            <span class="iconfont icon-yalichuanganqi"></span>
            <div><span>50%rh</span></div>
            <div><span>空气温湿度</span></div>
            <div><span>EUI:2JD92738389</span></div> </el-card
          ><el-card class="smallcard">
            <span class="iconfont icon-yalichuanganqi"></span>
            <div><span>50%rh</span></div>
            <div><span>空气温湿度</span></div>
            <div><span>EUI:2JD92738389</span></div> </el-card
          ><el-card class="smallcard">
            <span class="iconfont icon-yalichuanganqi"></span>
            <div><span>50%rh</span></div>
            <div><span>空气温湿度</span></div>
            <div><span>EUI:2JD92738389</span></div> </el-card
          ><el-card class="smallcard">
            <span class="iconfont icon-yalichuanganqi"></span>
            <div><span>50%rh</span></div>
            <div><span>空气温湿度</span></div>
            <div><span>EUI:2JD92738389</span></div>
          </el-card>
        </div>
      </el-card>
    </div>
    <div class="bigcard">
      <el-card class="box-card-w">
        <h3>潍坊农业基地</h3>
        <div class="clearfix-w">
          <el-card class="smallcard">
            <span class="iconfont icon-yalichuanganqi"></span>
            <div><span>50%rh</span></div>
            <div><span>空气温湿度</span></div>
            <div><span>EUI:2JD92738389</span></div>
          </el-card>
          <el-card class="smallcard">
            <span class="iconfont icon-yalichuanganqi"></span>
            <div><span>50%rh</span></div>
            <div><span>空气温湿度</span></div>
            <div><span>EUI:2JD92738389</span></div>
          </el-card>
          <el-card class="smallcard">
            <span class="iconfont icon-yalichuanganqi"></span>
            <div><span>50%rh</span></div>
            <div><span>空气温湿度</span></div>
            <div><span>EUI:2JD92738389</span></div>
          </el-card>
          <el-card class="smallcard">
            <span class="iconfont icon-yalichuanganqi"></span>
            <div><span>50%rh</span></div>
            <div><span>空气温湿度</span></div>
            <div><span>EUI:2JD92738389</span></div> </el-card
          ><el-card class="smallcard">
            <span class="iconfont icon-yalichuanganqi"></span>
            <div><span>50%rh</span></div>
            <div><span>空气温湿度</span></div>
            <div><span>EUI:2JD92738389</span></div> </el-card
          ><el-card class="smallcard">
            <span class="iconfont icon-yalichuanganqi"></span>
            <div><span>50%rh</span></div>
            <div><span>空气温湿度</span></div>
            <div><span>EUI:2JD92738389</span></div> </el-card
          ><el-card class="smallcard">
            <span class="iconfont icon-yalichuanganqi"></span>
            <div><span>50%rh</span></div>
            <div><span>空气温湿度</span></div>
            <div><span>EUI:2JD92738389</span></div>
          </el-card>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import GaiLan from "./components/GaiLan.vue";
import { $sensorList } from "@/api/index";
import ConTitle from "@/components/ConTitle";

export default {
  name: "DataView",
  components: {
    GaiLan,
    ConTitle,
  },
  data() {
    return {
      sensorList: [],
      info: {
        path: "",
        text: "设备列表",
        msg: " - 监控所有设备状态",
      },
    };
  },
  async mounted() {
    var res = await $sensorList();
    console.log(res);
    this.sensorList = res.data.data;
  },
};
</script>

<style lang="scss" scoped>
data {
  .big-title {
    font-size: 20px;
    font-weight: bold;
  }
}
.lineleft {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-right: 10px;
  margin-top: 10px;
}
.bigcard {
  margin-top: 10px;
}
.smallcard {
  height: 190px;
  width: 220px;
  font-size: 20px;
  text-align: center;
}

.iconfont {
  color: lightgreen;
  font-size: 50px;
  display: inline-block;
  -moz-transform: scaleY(-1);
  -webkit-transform: scaleY(-1);
  -o-transform: scaleY(-1);
  transform: scaleY(-1);
}
span {
  margin-bottom: 30px;
}
.clearfix-w {
  display: flex;
  justify-content: space-between;
  margin-top: 50px;
}
.box-card-w {
  height: 300px;
}
</style>